<template>
  <header class="py-10">
    <Container>
      <nav class="relative z-50 flex justify-between">
        <!-- Logo 和桌面导航 -->
        <div class="flex items-center md:gap-x-12">
          <RouterLink to="/" aria-label="Home">
            <Logo class="h-10 w-auto" />
          </RouterLink>
          <div class="hidden md:flex md:gap-x-6">
            <NavLink v-for="link in navLinks" :key="link.href" :href="link.href">
              {{ link.label }}
            </NavLink>
          </div>
        </div>

        <!-- 右侧操作区 -->
        <div class="flex items-center gap-x-5 md:gap-x-8">
          <div class="hidden md:block">
            <RouterLink to="/auth/login" class="text-sm leading-6 text-slate-700 hover:text-slate-900">
              Sign in
            </RouterLink>
          </div>

          <Button severity="primary" class="rounded-full" @click="$router.push('/register')">
            Get started
            <span class="hidden lg:inline">today</span>
          </Button>

          <!-- 移动端菜单 -->
          <div class="-mr-1 md:hidden">
            <Button icon="pi pi-bars" link aria-label="Toggle Navigation" @click="toggle" />

            <Popover ref="mobileMenu" appendTo="body">
              <Button
                v-for="link in navLinks"
                :key="link.href"
                link
                class="block w-full p-2 text-left"
                @click="$router.push(link.href)"
              >
                {{ link.label }}
              </Button>
              <hr class="m-2 border-slate-300/40" />
              <Button link class="block w-full p-2 text-left" @click="$router.push('/auth/login')"> Sign in </Button>
            </Popover>
          </div>
        </div>
      </nav>
    </Container>
  </header>
</template>

<script setup lang="ts">
  import Logo from './Logo.vue'
  import { ref } from 'vue'
  import Button from 'primevue/button'
  import Popover from 'primevue/popover'
  import Container from './Container.vue'
  import NavLink from './NavLink.vue'

  // 状态
  const mobileMenu = ref()
  const toggle = (event: Event) => {
    mobileMenu.value.toggle(event)
  }

  // 导航链接数据
  const navLinks = [
    { href: '#features', label: 'Features' },
    { href: '#testimonials', label: 'Testimonials' },
    { href: '#pricing', label: 'Pricing' },
  ]
</script>
